<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<link rel="stylesheet" href="zns_style.css"/>
<script>
    function getStyle(obj, name)
    {
        if(obj.currentStyle)
        {
            return obj.currentStyle[name];
        }
        else
        {
            return getComputedStyle(obj, false)[name];
        }
    }

    function startMove(obj, attr, iTarget)
    {
        clearInterval(obj.timer);
        obj.timer=setInterval(function (){
            var cur=0;

            if(attr=='opacity')
            {
                cur=Math.round(parseFloat(getStyle(obj, attr))*100);
            }
            else
            {
                cur=parseInt(getStyle(obj, attr));
            }

            var speed=(iTarget-cur)/6;
            speed=speed>0?Math.ceil(speed):Math.floor(speed);

            if(cur==iTarget)
            {
                clearInterval(obj.timer);
            }
            else
            {
                if(attr=='opacity')
                {
                    obj.style.filter='alpha(opacity:'+(cur+speed)+')';
                    obj.style.opacity=(cur+speed)/100;

                   // document.getElementById('txt1').value=obj.style.opacity;
                }
                else
                {
                    obj.style[attr]=cur+speed+'px';
                }
            }
        }, 30);
    }
    function getByClass(oParent,sClass){
        var aEle=oParent.getElementsByTagName('*');
        var aResult=[];

        for(var i=0;i<aEle.length;i++){
            if(aEle[i].className==sClass){
                aResult.push(aEle[i]);
            }
        }
        return aResult;
    }

    window.onload=function(){
        var oDiv=document.getElementById('playimages');
        var oBtnPre=getByClass(oDiv,'prev')[0];
        var oBtnNext=getByClass(oDiv,'next')[0];
        var oMarkLeft=getByClass(oDiv,'mark_left')[0];
        var oMarkRight=getByClass(oDiv,'mark_right')[0];

        var oDivSmall=getByClass(oDiv,'small_pic')[0];
        var oUlSmall=oDivSmall.getElementsByTagName('ul')[0];
        var aLiSmall=oDivSmall.getElementsByTagName('li');

        var oUlBig=getByClass(oDiv,'big_pic')[0];
        var aLiBig=oUlBig.getElementsByTagName('li');

        var nowZIndex=2;

        var now=0;

        oUlSmall.style.width=aLiSmall.length*aLiSmall[0].offsetWidth+'px';

        //上一个，下一个
        oBtnPre.onmouseover=oMarkLeft.onmouseover=function(){
            startMove(oBtnPre,'opacity',100);
        };
        oBtnPre.onmouseout=oMarkLeft.onmouseout=function(){
            startMove(oBtnPre,'opacity',0);
        };
        oBtnNext.onmouseover=oMarkRight.onmouseover=function(){
            startMove(oBtnNext,'opacity',100);
        };
        oBtnNext.onmouseout=oMarkRight.onmouseout=function(){
            startMove(oBtnNext,'opacity',0);
        };
        //大图切换
        for(var i=0;i<aLiSmall.length;i++){
            aLiSmall[i].index=i;
            aLiSmall[i].onclick=function()
            {
                 if(this.index==now) return;
                 now=this.index;
                   tab();
            }

            aLiSmall[i].onmouseover=function(){
                startMove(this,'opacity',100);
            }
            aLiSmall[i].onmouseout=function(){
                if(this.index!=now){
                    startMove(this,'opacity',60);
                }

            }
        }
        oBtnPre.onclick=function(){
            now--;
            if(now==-1){
                now=aLiSmall.length-1;
            }
            tab();
        }
        oBtnNext.onclick=function(){
            now++;
            if(now==aLiSmall.length){
                now=0;
            }
            tab();
        }
        function tab(){
            aLiBig[now].style.zIndex=nowZIndex++;

            for(var i=0;i<aLiSmall.length;i++)
            {
                startMove(aLiSmall[i],'opacity',60);
            }
            startMove(aLiSmall[now],'opacity',100);

            aLiBig[now].style.height=0;
            startMove(aLiBig[now],'height',320);

            if(now==0){
                startMove(oUlSmall,'left',0);
            }
            else if(now==aLiSmall.length-1){
                startMove(oUlSmall,'left',-(now-2)*aLiSmall[0].offsetWidth);
            }
            else{
                startMove(oUlSmall,'left',-(now-1)*aLiSmall[0].offsetWidth);
                console.log(-(now-1)*aLiSmall[0].offsetWidth);
            }
        }
        var timer=setInterval(oBtnNext.onclick,2000);
        oDiv.onmouseover=function(){
            clearInterval(timer);
        }
        oDiv.onmouseout=function(){
            timer=setInterval(oBtnNext.onclick,2000);
        }
    }
</script>
<body>
<div id="playimages" class="play">
    <ul class="big_pic">

        <div class="prev"></div>
        <div class="next"></div>

        <div class="text">加载图片说明……</div>
        <div class="length">计算图片数量……</div>

        <a class="mark_left" href="javascript:;"></a>
        <a class="mark_right" href="javascript:;"></a>
        <div class="bg"></div>

        <li style="z-index:1;"><img src="images/1.jpg" /></li>
        <li><img src="images/2.jpg" /></li>
        <li><img src="images/3.jpg" /></li>
        <li><img src="images/4.jpg" /></li>
        <li><img src="images/5.jpg" /></li>
        <li><img src="images/6.jpg" /></li>
    </ul>
    <div class="small_pic">
        <ul style="width:390px;">
            <li style="filter:; opacity: 1;"><img src="images/1.jpg" /></li>
            <li><img src="images/2.jpg" /></li>
            <li><img src="images/3.jpg" /></li>
            <li><img src="images/4.jpg" /></li>
            <li><img src="images/5.jpg" /></li>
            <li><img src="images/6.jpg" /></li>
        </ul>
    </div>
</div>
</body>
</html>